<template>
    <div>
        <el-dialog :title="title" :visible="open" @close="close()" width="1024px">
            <ht-form
                ref="editForm"
                :rowNum="2"
                :open="open"
                :rowData="rowData"
                :dictMap="dictMap"
                :formDiarules="formDiarules"
                :formListOptions="formListOptions"
                @isParentFn="isParentFn"
            />
            <div>
                <div style="display: flex;justify-content: space-between;padding-bottom: 10px;">
                    <div><h3>参数管理</h3></div>
                    <div><el-button type="primary" plain @click="addParam">添加参数</el-button></div>
                </div>

                <el-table
                    :data="paramList"
                    style="width: 100%">
                        <el-table-column
                            prop="name"
                            label="名称">
                            <template scope="scope">
                                <el-input v-model="scope.row.name"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="title"
                            label="标题">
                            <template scope="scope">
                                <el-input v-model="scope.row.title"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="type"
                            label="类型"
                            width="200">
                            <template scope="scope">
                                <el-input v-model="scope.row.type"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="array"
                            label="是否数组"
                            width="80">
                            <template scope="scope">
                                <el-checkbox v-model="scope.row.array"></el-checkbox>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="collectionType"
                            label="集合类型"
                            width="200">
                            <template scope="scope">
                                <el-input v-model="scope.row.collectionType"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="required"
                            label="是否必须"
                            width="80">
                            <template scope="scope">
                                <el-checkbox v-model="scope.row.required"></el-checkbox>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="操作">
                            <template scope="scope">
                                <el-button type="text" @click="removeParam(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">提交</el-button>
                <el-button @click="close">关闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>

import { save,update,getByName } from "@/api/cnaps/flowWidget/index";
export default {
    props: {
        dictMap: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {
            name: '',
            title: '编辑模版',
            open: false,
            isEdit: false,
            formDiarules:  {
                name: [
                    {
                        required: true,
                        message: '名称必须输入',
                        trigger: 'blur'
                    }
                ]
            },
            formListOptions: [],
            rowData: {},
            paramList: [],
            // 默认参数列表
            defaultParamList: [
                {"name":"input","title":"参数输入","type":"java.lang.String","required":false,"array":false},
                {"name":"output","title":"参数输出","type":"java.lang.String","required":false,"array":false},
                {"name":"result","title":"结果","type":"java.lang.String","required":false,"array":false}]
        }
    },
    methods: {
        initFormItem() {
            this.formListOptions = [
                {
                    type: 'input',
                    prop: 'name',
                    defaultAttr: {
                        label: '组件名称',
                        placeholder: '请输入组件名称',
                        disabled: this.isEdit
                    }
                },
                {
                    type: 'input',
                    prop: 'category',
                    defaultAttr: {
                        label: '分组名称',
                        placeholder: '请输入分组名称'
                    }
                },
                {
                    type: 'input',
                    prop: 'bean',
                    defaultAttr: {
                        label: '组件处理BeanName',
                        placeholder: '请输入组件处理BeanName'
                    }
                },
                {
                    type: 'input',
                    prop: 'title',
                    defaultAttr: {
                        label: '组件标题',
                        placeholder: '请输入组件标题'
                    }
                },
                {
                    type: 'input',
                    prop: 'shortDescription',
                    defaultAttr: {
                        label: '简短描述',
                        placeholder: '请输入简短描述'
                    }
                },
                {
                    type: 'input',
                    prop: 'longDescription',
                    defaultAttr: {
                        label: '详细描述',
                        placeholder: '请输入详细描述'
                    }
                }
            ]
        },
        show(name = '',isEdit = false) {

            this.isEdit = isEdit;
            this.$set(this,'rowData',{})
            this.paramList = []
            this.name = name;
            this.initFormItem()

            if(name) {
                getByName(name).then(res => {
                    console.log('res',res)
                    this.$set(this,'rowData',res.result)
                    this.open = true;
                    this.paramList = res.result.paramList
                })
            } else {
                this.paramList = this.defaultParamList;
                this.open = true;
            }
        },
        close() {
            this.open = false
        },
        isParentFn(formData) {
            formData.paramList = this.paramList;
            if(this.name) {
                formData.name = this.name;
                update(formData).then(res => {
                    this.msgSuccess('修改成功');
                    this.open = false;
                    this.$emit('editComplete',true)
                })
            } else {
                save(formData).then(res => {
                    this.msgSuccess('保存成功');
                    this.open = false;
                    this.$emit('editComplete',true)
                })
            }
        },
        submitForm() {
            this.$refs.editForm.sonData();
        },
        addParam() {
            this.paramList.push({
                name: '',
                title: '',
                type:'',
                collectionType:'',
                array: false,
                required:false
            })
        },
        removeParam(row) {
            this.paramList.forEach((item,index,arr) => {
                if(item.name === row.name){
                    arr.splice(index,1);
                    return
                }
            });
        }
    }
}
</script>
